<template>
  <div class="menuBody">
    <div class="addMenu">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span> <i class="el-icon-tickets"></i> 数据列表</span>
          <el-button size="small" @click="resourceAdd()">添加</el-button>
        </div>
      </el-card>
      <el-dialog :title="isEdit ? '编辑用户' : '添加用户'" :visible.sync="dialogVisible" width="38%">
        <el-form ref="form" :model="categoryForm" label-width="100px">
          <el-form-item label="模块名称:">
            <el-input
              v-model="categoryForm.name"
              placeholder="请输入菜单名称"
              clearable
            ></el-input>
          </el-form-item>

          <!-- <el-form-item label="是否显示:">
            <el-radio v-model="menuForm.radio" label="1">是</el-radio>
            <el-radio v-model="menuForm.radio" label="2">否</el-radio>
          </el-form-item>
          <el-form-item label="排序:">
            <el-input v-model="menuForm.sort" ></el-input>
          </el-form-item> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="categoryCreateCancel()" size="small"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="categoryCreateDetermine()"
            size="small"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>

    <div class="menuList">
      <el-card class="box-card">
        <el-table
          :data="tableData"
          border
          :header-cell-style="{ textAlign: 'center' }"
          style="width: 100%"
          :cell-style="{ textAlign: 'center' }"
          class="icon-card"
        >
          <el-table-column prop="categoryId" label="ID"> </el-table-column>
          <el-table-column prop="name" label="资源名称"> </el-table-column>
          <el-table-column prop="createTiem" label="创建时间">
          </el-table-column>
          <el-table-column prop="operation" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text" @click="resourceUpdate(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  @click="categoryDelete(scope.row.categoryId)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>
<script>
import category from "@/api/re_category";
import { Message, MessageBox } from "element-ui";
const defaultRe_Category = {
  categoryId: "",
  name: "",
};
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      isEdit: false,
      pageSize: 5,
      pageNum: 1,
      categoryForm: Object.assign({}, defaultRe_Category),
    };
  },
  created() {
    this.categoryGetData();
  },
  methods: {
    categoryGetData() {
      category.listAll().then((res) => {
        this.tableData = res.data;
      });
    },
    categoryDelete(id) {
      MessageBox.confirm("确定要删除该记录吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        category.delete(id).then((res) => {
          Message({
            message: "删除" + res.message,
            type: "success",
            duration: 5 * 1000,
          });
          this.tableData = this.tableData.filter((item) => {
            return item.categoryId != id;
          });
        });
      });
    },

    transformResourceForm(dialogVisible, isEdit, categoryForm) {
      this.dialogVisible = dialogVisible;
      this.isEdit = isEdit;
      this.categoryForm = Object.assign({}, categoryForm);
    },
    resourceAdd() {
      this.transformResourceForm(true, false, defaultRe_Category);
    },
    resourceUpdate(row) {
      console.log(row);
      this.transformResourceForm(true, true, row);
    },

    categoryCreateCancel() {
      this.dialogVisible = false;
    },
    categoryCreateDetermine() {
      MessageBox.confirm("确定要进行该操作吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (this.isEdit) {
          category
            .update(this.categoryForm.categoryId, this.categoryForm)
            .then((res) => {
              Message({
                message: "修改成功",
                type: "success",
                duration: 5 * 1000,
              });
              this.categoryGetData();
              this.dialogVisible = false;
            });
        } else {
          category.create(this.categoryForm).then((res) => {
            Message({
              message: "创建" + res.message,
              type: "success",
              duration: 5 * 1000,
            });
            this.categoryGetData();
            this.dialogVisible = false;
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.menuBody {
  height: 91.3%;
  width: 100%;
  .addMenu {
    height: 130px;
    line-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    .box-card {
      width: 95%;
      height: 60.5px;
      /deep/ .el-card__header {
        border: none;
        .clearfix {
          position: relative;
          bottom: 12.5px;
        }
        button {
          position: relative;
          //top: 6px;
          left: 87%;
        }
      }
    }
    /deep/ .el-form {
      width: 80%;
      padding-left: 70px;
      .el-form-item,
      .el-form-item__label,
      .el-form-item__content,
      .el-input,
      .el-input__inner {
        height: 32px;
        width: 250px;
      }
      .desc {
        height: 110px;
        .el-form-item__label,
        .el-form-item__content,
        .el-input,
        .el-textarea,
        .el-textarea__inner {
          height: 110px;
        }
      }
    }
  }
  .menuList {
    line-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -12px;
    .box-card {
      width: 95%;
      /deep/ .el-card__header {
        border: none;
        .clearfix {
          position: relative;
          bottom: 12.5px;
        }
        button {
          position: relative;
          //top: 6px;
          left: 620px;
        }
      }
      /deep/ .el-card__body {
        .el-table__header tr,
        .el-table__header th {
          padding: 0;
          height: 48px;
        }
        .el-table__body tr,
        .el-table__body td {
          padding: 0;
          height: 50px;
        }
        .block {
          float: right;
          margin-top: 10px;
        }
      }
    }
  }
}
.icon-card i {
  font-size: 22px;
}
</style>
